{% extends 'backend.html' %}
{% block backend_main %}
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">添加广告</h3>
        </div>
        <div class="panel-body">
            <form class="layui-form layui-form-pane" id="add_adv_form">
                {% csrf_token %}
                <div class="layui-form-item">
                    <label for="title" class="layui-form-label">广告标题</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" autocomplete="off" placeholder="请输入"
                               lay-verify="required" class="layui-input" id="title">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="content" class="layui-form-label">广告正文</label>
                    <div class="layui-input-block">
                        <textarea name="content" id="content" placeholder="请输入内容"
                                  class="layui-textarea" lay-verify="required"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="phone" class="layui-form-label">联系电话</label>
                    <div class="layui-input-block">
                        <input type="text" name="phone" autocomplete="off" placeholder="请输入"
                               lay-verify="required" class="layui-input" id="title">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">轮播图</label>
                    <div class="layui-input-block">
                        <input type="checkbox" name="is_background" lay-skin="switch" lay-filter="switchTest"
                               title="ON|OFF">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">广告图像</label>
                    <div class="layui-input-block">
                        <label for="advertisement" class="col-sm-9 text-left"><img id="img_advertisement"
                                                                                   src="/static/advertisement/default.jpg"
                                                                                   alt="图片丢失"
                                                                                   style="height: 200px;width: 400px;"
                        ></label>
                        <input type="file" id="advertisement" name="advertisement" style="display: none">
                    </div>
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn" id="btn_submit_adv" lay-submit lay-filter="btn_submit_adv">确认
                    </button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        $(document).ready(
            {#实时渲染广告图像#}
            $('#advertisement').change(function () {
                    {#声明FileReader对象#}
                    let fileReader = new FileReader();
                    {#获取文件数据#}
                    let fileData = $(this)[0].files[0];
                    fileReader.readAsDataURL(fileData);
                    {#等待文件加载完再执行渲染，保重图片的数据完整渲染#}
                    fileReader.onload = () => {
                        $('#img_advertisement').attr('src', fileReader.result);
                    }
                }
            ),
            layui.use(['form'], function () {
                    let form = layui.form;
                    // 提交事件
                    form.on('submit(btn_submit_adv)', function () {
                        let formData = new FormData;
                        $.each($('#add_adv_form').serializeArray(), function (index, data_dict) {
                            formData.append(data_dict.name, data_dict.value)
                        })
                        formData.append('imgFile', $('#advertisement')[0].files[0]);
                        $.ajax({
                            url: '{% url 'backend:add_adv' %}',
                            type: 'post',
                            data: formData,
                            processData: false,
                            contentType: false,
                            success: function (response) {
                                Swal.fire({
                                    title: response.msg,
                                    icon: "success"
                                }).then((result) => {
                                    if (result.isConfirmed) {
                                        window.location.href =
                                        {% url 'backend:backend' %}
                                    }
                                })
                            },
                        })
                    });
                }
            ))
    </script>
{% endblock %}